import React, { useState } from 'react';
import { Button } from 'antd-mobile';
import styles from './index.module.less';
import { use } from 'i18next';

const TagGroup = ({ title, initialTags = [], addWorldInfo, selectedTag, handleTagClick }) => {

 
  const handleAddTag = () => {
    addWorldInfo()
  };

  return (
    <div className={styles.tagGroup}>
      {/* <h3 className={styles.title}>{title}</h3> */}
      <div className={styles.tagContainer}>
        {initialTags.map((tag, index) => (
          <Button
            key={index}
            shape="rounded"
            fill="outline"
            className={`${styles.tag} ${tag === selectedTag ? styles.selected : ''}`}
            onClick={() => handleTagClick(tag)}
          >
            {tag.world_name}
          </Button>
        ))}
        <Button
          shape="rounded"
          fill="outline"
          className={styles.addTag}
          onClick={handleAddTag}
        >
          +
        </Button>
      </div>
    </div>
  );
};

export default TagGroup;